<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结果展示</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            background: url('背景2.jpg') no-repeat center center fixed;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        h1 {
            color: white;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        
        .description {
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            max-width: 600px;
            text-align: center;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .result-container {
            background: rgba(255,255,255,0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            text-align: center;
            max-width: 90%;
        }
        
        #resultImage {
            max-width: 100%;
            max-height: 400px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        
        .back-btn {
            padding: 12px 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .music-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <audio id="bgMusic" loop autoplay preload="auto">
        <source src="music.mp4" type="audio/mp4">
        <source src="music.mp3" type="audio/mpeg">
    </audio>
    
    <h1>🎉 喂食完成！</h1>
    
    <div class="description" id="description"></div>
    
    <div class="result-container">
        <img id="resultImage" alt="结果图片">
        <br>
        <button class="back-btn" onclick="goBack()">返回喂食</button>
    </div>
    
    <div class="music-control" onclick="toggleMusic()">
        🎵 <span id="musicStatus">暂停音乐</span>
    </div>

    <script>
        const bgMusic = document.getElementById('bgMusic');
        const musicStatus = document.getElementById('musicStatus');
        const descriptionEl = document.getElementById('description');
        
        const descriptions = {
            '一.png': '吃沙丁鱼、鲱鱼、鲭鱼后，这些是油性非常丰富的鱼类，肌肉组织呈深色。鲨鱼消化它们后，排出的粪便会偏向深绿色。',
            '二.png': '吃金枪鱼后：金枪鱼的鱼肉呈深红色或粉红色，因为它肌肉中含有大量的肌红蛋白。消化后，粪便可能带有偏红或偏橙的色调，尤其是在大量进食后。',
            '三.png': '🎊 恭喜开到隐藏款！',
            '四.png': '吃鳕鱼后：鳕鱼是典型的白色鱼肉鱼类，脂肪含量较低，肌肉色素也较少。消化后产生的粪便颜色可能会浅一些，比如浅褐色或黄褐色。',
            '五.png': '吃金枪鱼后：金枪鱼的鱼肉呈深红色或粉红色，因为它肌肉中含有大量的肌红蛋白。消化后，粪便可能带有偏红或偏橙的色调，尤其是在大量进食后。'
        };
        
        const resultImage = sessionStorage.getItem('currentResult');
        if (resultImage) {
            document.getElementById('resultImage').src = resultImage;
            descriptionEl.textContent = descriptions[resultImage] || '';
        } else {
            const rand = Math.random();
            let selectedImage;
            if (rand < 0.2) selectedImage = '三.png';
            else if (rand < 0.4) selectedImage = '一.png';
            else if (rand < 0.6) selectedImage = '二.png';
            else if (rand < 0.8) selectedImage = '四.png';
            else selectedImage = '五.png';
            document.getElementById('resultImage').src = selectedImage;
            descriptionEl.textContent = descriptions[selectedImage] || '';
        }
        
        // 设置音乐源并自动播放
        bgMusic.src = 'music.mp4';
        bgMusic.volume = 0.5;
        
        // 尝试自动播放
        function tryPlayMusic() {
            bgMusic.play().then(() => {
                musicStatus.textContent = '暂停音乐';
            }).catch(() => {
                musicStatus.textContent = '点击播放音乐';
                // 用户交互后播放
                document.body.addEventListener('click', function playOnClick() {
                    bgMusic.play().then(() => {
                        musicStatus.textContent = '暂停音乐';
                    });
                    document.body.removeEventListener('click', playOnClick);
                });
            });
        }
        tryPlayMusic();
        
        function toggleMusic() {
            if (bgMusic.paused) {
                bgMusic.play();
                musicStatus.textContent = '暂停音乐';
            } else {
                bgMusic.pause();
                musicStatus.textContent = '播放音乐';
            }
        }
        
        function goBack() {
            window.close();
            window.location.href = 'choose.html';
        }
    </script>
</body>
</html>
